<template>
  <div @click="flipGage(componentFData.id)" class="component-f-con">

    <!-- 字段標題 -->
    <div v-if="!groupTypeFun('U')" class="f-title">
      <span>{{componentFData.title}}</span>
      <Icon v-if="groupTypeTPM" type="chevron-right"></Icon>
    </div>

    <!-- 1110 - 多段 -->
    <div class="f-value f-value1110" v-if="fieldTypeFun(1110)">{{componentFData.hint}}</div>

    <!-- 1120 - 单段 -->
    <div class="f-value f-value1120" v-if="fieldTypeFun(1120)">{{componentFData.hint}}</div>

    <!-- 1210 - 普通短文本 -->
    <div class="f-value f-value1210" v-if="fieldTypeFun(1210)">{{componentFData.hint}}</div>

    <!-- 1220 - 数字 | 1241 - 金额 | 1242 - 面积 | 1243 - 个数 | 1244 - 篇数 | 1245 - 百分比 | 1246 - 人数 | 1247 - 次数-->
    <div class="f-value f-value-num" v-if="fieldTypeNum">{{componentFData.hint}}</div>


    <!-- 2000 - 图片 -->
    <div class="f-value f-value2000" v-if="fieldTypeFun(2000)">
      <img :src="componentFData.hint" alt="">
    </div>

    <Modal title="查看图片" v-model="visible">
      <img :src="componentFData.title" v-if="visible" style="width: 100%">
    </Modal>

    <!-- 3100 可預覽附件 -->
    <div class="f-value f-value3100" v-if="fieldTypeFun(3100)">
      <a target="_blank" :href="componentFData.value">{{componentFData.hint}}</a>
    </div>

    <!-- 4100 - 日期 -->
    <div class="f-value f-value4100" v-if="fieldTypeFun(4100)">{{componentFData.hint}}</div>

    <!-- P | T -->
    <!--<div class="f-value" v-if="groupTypeTPM">-->
    <!--<span>{{value}}</span>-->
    <!--</div>-->

    <div class="f-value f-value91xx" v-if="field91xx">
      <p>{{componentFData.value.title}}</p>
    </div>

    <!-- 9210 地区 -->
    <div class="f-value f-value9210" v-if="fieldTypeFun(9210)">{{componentFData.hint}}</div>


    <!-- 9390 - 勾选奖项 -->
    <div class="f-value f-value9390" v-if="fieldTypeFun(9390)">
      <p v-for="items in value" :key="items.id">{{items.title}}<span>（{{items.hint}}）</span></p>
    </div>

    <!-- 92xx 联动单选字段 -->
    <div class="f-value f-value91xx" v-if="field92xx">
      <p>{{componentFData.hint}}</p>
    </div>

    <!-- 9300~9390 多选项 -->
    <div class="f-value f-value91xx" v-if="field93xx">
      <p>{{componentFData.hint}}</p>
    </div>
  </div>

</template>

<script>
  export default {
    name      : 'componentF',
    data() {
      return {
        dictionaryPrizeArr: [],
        prize             : [],
        groupIds          : this.groupId,
        status            : this.componentFData.status,
        fieldType         : this.componentFData.fieldType,
        value             : this.componentFData.value || this.componentFData.hint,
        visible           : false
      }
    },
    props     : ['componentFData', 'applyId', 'groupType', 'groupId', 'componentGData'],
    components: {},
    computed  : {
      fieldTypeNum() {
        return this.fieldType >= 1220 && this.fieldType <= 1247
      },
      statusFun() {
        return this.componentFData.value
      },
      dateValue() {
        return this.value ? Number(this.value) : ''
      },
      getGroupData() {
        return this.$store.getters.getGroupData
      },

      groupTypeTPM() {
        return this.groupType == 'T' || this.groupType == 'P' || this.groupType == 'M'
      },
      groupTypeU() {
        return this.groupType == 'U'
      },

      field91xx() {
        return this.fieldType > 9099 && this.fieldType < 9200
      },

      //联动单选字段
      field92xx() {
        return this.fieldType > 9199 && this.fieldType < 9300
      },

      //显示多字段
      field93xx() {
        return this.fieldType > 9299 && this.fieldType < 9390
      },

      dictionaryPrize() {
        if (this.fieldTypeFun(9390)) {
          return this.$store.state.dictionaryPrize
        }
      },
    },
    methods   : {
      groupTypeFun(obj1, obj2) {
        return this.groupType == obj1 || (obj2 && this.groupType == obj2)
      },
      fieldTypeFun(num) {
        return num == this.fieldType
      },

      flipGage(id) {
        if (this.groupTypeTPM) {
          let url = `/component/itemInstance?itemInstance=${id}&groupId=${this.groupIds}`;
          this.$store.commit('addComponentHistory', url)
        }
      },
      changePrize(data) {
      },
      in_array(valueArr, PrizeArr) {
        for (let i = 0, a; a = PrizeArr[i++];) {
          for (let j = 0, b; b = valueArr[j++];) {
            if (b.id == a.id) {
              this.prize.push(b.id);
            }
          }
        }
      },
      prizePush() {
        this.dictionaryPrizeArr = []
      },
      handleView() {
        this.visible = true
      }
    },
    created() {
      if (this.fieldTypeFun(9390)) {
        this.prizePush()
      }
    }
  }
</script>
